<template>
	<view class="search">
		<block v-if="show">
			<view class="search-input">
				<input type="text" v-model="keyword" confirm-type="search" placeholder="请输入关键字搜索" placeholder-class="place" @confirm="goSearch(keyword,'关键字')"/>
				<image
					src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/scanning.png?v=1"
					class="scanning"
					@click="imgSearch">
				</image>
			</view>
			<view class="search-items" v-if="recent_list.length">
				<view class="search-items-tit">
					<text>历史</text>
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/search/icon1.png" @click="clearHistory"></image>
				</view>
				<view class="search-items-list">
					<view class="search-item" v-for="(data,index) in recent_list" :key="index" @click="goSearch(data,'历史')">{{data}}</view>
				</view>
			</view>
			<view class="search-items">
				<view class="search-items-tit">
					<text>发现</text>
				</view>
				<view class="search-items-list">
					<view class="search-item" v-for="(data,index) in discovery_list" :key="index" @click="goSearch(data,'发现')">{{data}}</view>
				</view>
			</view>
			<view class="hot-search">
				<view class="hot-search-tit">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/search/icon3.png"></image>
					<!-- #ifdef APP-PLUS -->
					搜索排行榜
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN || H5 -->
					热搜榜
					<!-- #endif -->
				</view>
				<view class="hot-search-list">
					<view class="hot-search-item" v-for="(data,index) in ranking_list" :key="index" @click="goSearch(data.keyword,'热搜榜')">
						<view :class="['index',{index1: index==0,index2: index==1,index3: index==2}]">{{index+1}}</view>
						<view class="name">{{data.keyword}}</view>
						<text class="click">人气 {{data.sum}}</text>
					</view>
				</view>
			</view>
			
			<view class="search-result" v-if="searchResultList.length" :style="{top: top + 'px'}" @touchmove.stop.prevent="">
				<scroll-view scroll-y class="search-result-scroll">
					<view class="search-result-item" v-for="(data,index) in searchResultList" :key="index" @click="goSearch(data,'搜索结果')">{{data}}</view>
				</scroll-view>
			</view>
		</block>
		<pt-loading></pt-loading>		
	</view>
</template>

<script>
	import FormData from '@/api/http.interceptor.js'
	export default {
		data() {
			return {
				show: false,
				top: 0,
				keyword: '',
				searchResultList: [],
				discovery_list: [],
				ranking_list: [],
				recent_list: [],
				action: `${this.$domain}/api/Upimg/UpImg`,
				formData: FormData.sign(),
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				}
			};
		},
		watch: {
			keyword(newVal,oldVal){
				if(newVal.indexOf('灯') < 0){
					this.$u.api.StoreGoodsSearch({keyword: this.keyword}).then(res => {
						this.searchResultList = res.datas.data
					})
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				this.$u.api.StoreGoodsChange().then(res => {
					this.show = true
					this.discovery_list = res.datas.discovery_list
					this.ranking_list = res.datas.ranking_list
					this.recent_list = res.datas.recent_list
					this.$nextTick(() => {
						uni.createSelectorQuery().select('.search-input').boundingClientRect(res => {
							if(res){
								this.top = res.height + 15
							}
						}).exec()
					})
				})
			},
			imgSearch(){
				uni.chooseImage({
					count: 1,
					sizeType: ["original","compressed"],
					sourceType: ["album","camera"],
					success: (choseRes) => {
						uni.uploadFile({
							url: this.action,
							filePath: choseRes.tempFilePaths[0],
							formData: this.formData,
							name: 'file',
							success: (imgUrl) => {
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/search/search-result?url='+JSON.parse(imgUrl.data).datas[0]
								})
							}
						})
					}
				})
			},
			goSearch(keyword,type){
				if(keyword.indexOf('灯')!=-1){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/light/light?keyword='+keyword
					})
					if(uni.getStorageSync('userInfo')){
						this.addFoot('搜索-'+type,keyword)
					}
					return false
				}
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/search/search-result?keyword='+keyword
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('搜索-'+type,keyword)
				}
			},
			clearHistory(){
				this.$u.api.StoreGoodsChangeDel().then(res => {
					uni.showToast({
						icon: 'none',
						title: '清除成功'
					})
					this.init()
				})
			},
			addFoot(where,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1,
					detail: '#客户搜索了"'+detail+'"，请跟进客户的具体需求'
				})
			}
		},
		mounted() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看搜索')
			}
		},
		onUnload() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看搜索')
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFF;
	}
	.search{
		padding: 30rpx;
		.search-input{
			border-bottom: solid 5rpx #141414;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			input{
				flex: 1;
				min-width: 0;
				font-size: 32rpx;
			}
			.place{
				color: #A4A4A4;
			}
			.scanning{
				width: 45rpx;
				height: 45rpx;
			}
		}
		.search-items{
			margin-top: 60rpx;
			.search-items-tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-weight: bold;
					font-size: 32rpx;
				}
				image{
					width: 26rpx;
					height: 26rpx;
				}
			}
			.search-items-list{
				.search-item{
					display: inline-block;
					max-width: 690rpx;
					vertical-align: top;
					height: 72rpx;
					line-height: 68rpx;
					border: 2rpx solid rgba(230,230,230,1);
					border-radius: 4rpx;
					margin: 40rpx 30rpx 0 0;
					padding: 0 45rpx;
					min-width: 170rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		.hot-search{
			margin-top: 60rpx;
			.hot-search-tit{
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 32rpx;
				image{
					width: 22rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}
			.hot-search-list{
				display: flex;
				flex-wrap: wrap;
				.hot-search-item{
					width: 50%;
					display: flex;
					align-items: center;
					margin-top: 60rpx;
					.index{
						width: 32rpx;
						height: 32rpx;
						border: 2rpx solid rgba(229,229,229,1);
						border-radius: 4rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #141414;
						font-size: 28rpx;
						font-weight: bold;
						margin-right: 20rpx;
						&.index1{
							background-color: #F5CB59;
							border-color: #F5CB59;
							color: #FFF;
						}
						&.index2{
							background-color: #A8A9B2;
							border-color: #A8A9B2;
							color: #FFF;
						}
						&.index3{
							background-color: #F59359;
							border-color: #F59359;
							color: #FFF;
						}
					}
					.name{
						font-size: 32rpx;
						font-weight: bold;
						color: #141414;
						margin-right: 30rpx;
					}
					.click{
						color: #A4A4A4;
						font-size: 22rpx;
					}
				}
			}
		}
		.search-result{
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: #FFF;
			.search-result-scroll{
				position: absolute;
				height: 100%;
				left: 30rpx;
				right: 30rpx;
				top: 0;
				width: auto;
				.search-result-item{
					padding: 30rpx 0;
					border-bottom: solid 2rpx #F4F4F4;
				}
			}
		}
	}
</style>
